<template>
  <div class="kj-con">
    <img src="../../assets/transact/banner.png" alt="" srcset="" />
    <div class="p-body">
      <div class="tabs" style="width:800px;margin:0 auto">
        <p
          @click="onTabOne(item.value)"
          :class="{ on: curIndexOne == item.value }"
          v-for="(item, index) in monthObjList"
          :key="index"
        >
          {{ item.label }}
        </p>
      </div>
      <div v-if="curIndexOne == 1">
        <div class="bgtext">
          <h1>QUALIFICATION</h1>
          <p>资格认定类</p>
        </div>
        <div class="card1-box">
          <div class="card1" v-for="(item, index) in list" :key="index">
            <img :src="`http://gccrc.hs620.cn${item.icon}`" alt="" />
            <div>{{ item.title }}</div>
            <div class="btn-box">
              <div>立即进入</div>
              <img src="../../assets/declare/1.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div v-if="curIndexOne == 2">
        <div class="bgtext">
          <h1>TREATMENT</h1>
          <p>待遇落实类</p>
        </div>
        <div class="mid-con">
          <img
            v-for="(item, index) in list"
            :key="index"
            :src="`http://gccrc.hs620.cn${item.banner}`"
            alt=""
          />
        </div>
      </div>
      <div v-if="curIndexOne == 3">
        <div class="bgtext">
          <h1>MEASURES</h1>
          <p>创业服务类</p>
        </div>
        <div class="list">
          <img
            v-for="(item, index) in list"
            :key="index"
            :src="`http://gccrc.hs620.cn${item.banner}`"
            alt=""
          />
        </div>
      </div>
      <div v-if="curIndexOne == 4">
        <div class="bgtext">
          <h1>MEASURES</h1>
          <p>工商注册登记</p>
        </div>
        <div class="list">
          <img
            v-for="(item, index) in list"
            :key="index"
            :src="`http://gccrc.hs620.cn${item.banner}`"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      monthObjList: [
        { value: "1", label: "资格认定类" },
        { value: "2", label: "待遇落实类" },
        { value: "3", label: "创业服务类" },
        { value: "4", label: "咨询服务类" }
      ],
      curIndexOne: 1,
      pageSize: [2, 8, 2, 2],
      list: []
    };
  },
  created() {
    this.getServicetList();
  },
  methods: {
    async getServicetList() {
      const res = await this.$store.dispatch("user/getServicetList", {
        pageNum: 1,
        pageSize: this.pageSize[this.curIndexOne - 1],
        serviceCode: this.curIndexOne
      });
      this.list = res.rows;
      console.log(res);
    },

    onTabOne(ind) {
      this.curIndexOne = ind;
      this.getServicetList();
    }
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
